<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>详情页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <link rel="stylesheet" href="../../res/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <a class="fly-logo" href="../jie/index.html">
            <img src="../../res/images/logo.png" alt="layui">
        </a>
        <ul class="layui-nav fly-nav layui-hide-xs">
            <li class="layui-nav-item layui-this">
                <a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>
            </li>
            <li class="layui-nav-item">
                <a href="../case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
            </li>
            <li class="layui-nav-item">
                <a href="http://www.layui.com/" target="_blank"><i class="iconfont icon-ui"></i>框架</a>
            </li>
        </ul>

        <div id="user_view">
            <ul class="layui-nav fly-nav-user">
                <!-- 未登入的状态 -->
                <li class="layui-nav-item">
                    <a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html"></a>
                </li>
                <li class="layui-nav-item">
                    <a href="../user/login.html">登入</a>
                </li>
                <li class="layui-nav-item">
                    <a href="../user/reg.html">注册</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="layui-hide-xs">
    <div class="fly-panel fly-column">
        <div class="layui-container">
            <ul class="layui-clear">
                <li class="layui-hide-xs"><a href="../jie/index.html">首页</a></li>
                <li><a href="javascript:void(0)" onclick="change_type(0)">提问</a></li>
                <li><a href="javascript:void(0)" onclick="change_type(1)">分享</a></li>
                <li><a href="javascript:void(0)" onclick="change_type(2)">讨论</a></li>
                <li><a href="javascript:void(0)" onclick="change_type(3)">建议</a></li>
                <li><a href="javascript:void(0)" onclick="change_type(4)">公告</a></li>
                <li><a href="javascript:void(0)" onclick="change_type(5)">动态</a></li>
                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>


            </ul>

            <div class="fly-column-right layui-hide-xs">
                <span class="fly-search"><i class="layui-icon"></i></span>
                <a href="add.html" class="layui-btn">发表新帖</a>
            </div>
            <div class="layui-hide-sm layui-show-xs-block"
                 style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
                <a href="add.html" class="layui-btn">发表新帖</a>
            </div>
        </div>
    </div>
</div>

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8 content detail">
            <!--详情-->
            <div class="fly-panel detail-box">
                <div id="news_detail_view"></div>
            </div>
            <!--回帖-->
            <div class="fly-panel detail-box" id="flyReply">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>评论区</legend>
                </fieldset>

                <ul class="jieda" id="jieda">
                    <div id="comment_item_view"></div>
                </ul>
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <textarea id="L_L_content" class="layui-textarea" style="height: 150px; width: 100%;"></textarea>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" onclick="addCommentToNews()">提交回复</button>
                </div>
            </div>
        </div>


        <!--热议-->
        <div class="layui-col-md4">
            <dl class="fly-panel fly-list-one">
                <dt class="fly-panel-title">本周热议</dt>
                <div id="hot_news_info_view"></div>
            </dl>

            <div class="fly-panel">
                <div class="fly-panel-title">
                    这里可作为广告区域
                </div>
                <div class="fly-panel-main">
                    <a href="" target="_blank" class="fly-zanzhu"
                       time-limit="2017.09.25-2099.01.01" style="background-color: #5FB878;">LayIM 3.0 - layui 旗舰之作</a>
                </div>
            </div>

            <div class="fly-panel" style="padding: 20px 0; text-align: center;">
                <img src="../../res/images/weixin.jpg" style="max-width: 100%;" alt="layui">
                <p style="position: relative; color: #666;">微信扫码关注 layui 公众号</p>
            </div>

        </div>
    </div>
</div>
<textarea id="content" required lay-verify="required"
          placeholder="请输入内容" class="layui-textarea layui-hide"
          style="height: 100%"></textarea>
<div class="fly-footer">
    <p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2017 &copy; <a href="http://www.layui.com/"
                                                                                target="_blank">layui.com 出品</a></p>
    <p>
        <a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
        <a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
        <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
    </p>
</div>

<script src="../../res/layui/layui.js"></script>
<script type="text/javascript" src="../../res/jquery-1.7.2.min.js"></script>
<script>
    layui.cache.page = 'jie';
    layui.cache.user = {
        username: '游客'
        , uid: -1
        , avatar: '../../res/images/avatar/00.jpg'
        , experience: 83
        , sex: '男'
    };
</script>

<script id="user_tmp" type="text/html">

    <ul class="layui-nav fly-nav-user">
        <li class="layui-nav-item">
            <a class="fly-nav-avatar" href="javascript:;">
                <cite class="layui-hide-xs" id="username">{{d.username}}</cite>
                <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
                <i class="layui-badge fly-badge-vip layui-hide-xs">VIP</i>
                <img src="{{d.headurl}}">
            </a>
            <dl class="layui-nav-child">
                <dd><a href="../user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
                <dd><a href="../user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a>
                </dd>
                <dd><a href="../user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a>
                </dd>
                <hr style="margin: 5px 0;">
                <dd><a onclick="logout()" style="text-align: center;">退出</a></dd>
            </dl>
        </li>
    </ul>
</script>
<script id="hot_news_info_tmp" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <dd>
        <a href="javascript:void(0)" onclick="chang_detail('{{item.id}}')">{{item.title}}</a>
        <span><i class="iconfont icon-pinglun1"></i> {{item.commentcount}}</span>
    </dd>
    {{#  }); }}
    {{#  if(d.length === 0){ }}
    无数据
    {{#  } }}
</script>
<script id="news_detail_tmp" type="text/html">
    <h1>{{d.title}}</h1>
    <div class="fly-detail-info">
        <span class="fly-list-nums"></span>
    </div>
    <div class="detail-about">
        <a class="fly-avatar" href="../user/home.html">
            <img src="{{d.headurl}}"
                 alt="">
        </a>
        <div class="fly-detail-user">
            <a href="../user/home.html" class="fly-link">
                <cite id="news_user_id">{{d.username}}</cite>
                <i class="iconfont icon-renzheng"></i>
            </a>
            <span>{{d.creationtime}}</span>
        </div>
        <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
            <span style="padding-right: 10px; color: #FF7200">悬赏：60飞吻</span>
            <!--<span class="layui-btn layui-btn-xs jie-admin" type="edit"><a href="add.html">编辑此贴</a></span>-->
        </div>
    </div>
    <!--详情-->
    <div class="detail-body photos">
        {{d.content}}
    </div>
</script>
<script id="comment_item_tmp" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <li data-id="111">
        <a name="item-1111111111"></a>
        <div class="detail-about detail-about-reply">
            <a class="fly-avatar" href="">
                <img src="{{item.headurl}}"
                     alt=" ">
            </a>
            <div class="fly-detail-user">
                <a href="" class="fly-link">
                    <cite>{{item.username}}</cite>
                </a>
            </div>
            <div class="detail-hits">
                <span>{{item.creationtime}}</span>
            </div>
        </div>
        <div class="detail-body jieda-body photos">
            <p>{{item.content}}</p>
        </div>
        <div class="jieda-reply">
            {{# if(item.islike==undefined){ }}
            <span class="jieda-zan" onclick="like('{{item.id}}')">
            {{#  } else { }}
            <span class="jieda-zan" style="color:#c00" onclick="dislike('{{item.id}}')">
            {{#  } }}
                <i class="iconfont icon-zan"></i>
                {{#  if(item.like==undefined){ }}
                    <em>0</em>
                {{#  } else { }}
                    <em>{{item.like}}</em>
                {{#  } }}
            </span>
            <span type="reply" onclick="add_comment('{{item.id}}')">
                <i class="iconfont icon-svgmoban53"></i>回复
            </span>
        </div>
        <br/>
        {{# layui.each(item.commentVoList, function(index2, item2){ }}
        <div class="jieda-reply" type="reply">
            <div class="fly-detail-user">
                <a href="" class="fly-link">
                    <cite>{{item2.username}}</cite>
                </a>
                评论:
                <a class="layui-bg-gray" href="javascript:void(0)">
                    {{item2.content}}
                </a>
            </div>
        </div>
        {{# }); }}
    </li>

    {{#  }); }}
    {{#  if(d.length === 0){ }}
    无数据
    {{#  } }}

</script>
<script>
    $(function () {
        let router = layui.router();
        if (router.search.id == undefined) {
            window.location = './index.html';
        } else {
            user_info();
            hot_news_info();
            comment_info(router.search.id);
            news_detail_info(router.search.id);
        }
    });

    function user_info() {
        $.ajax(address + '/login/getUserInfoByTicket', {
            type: 'POST',
            dataType: 'json'
        }).done(function (data) {
            layui.use('laytpl', function () {
                let laytpl = layui.laytpl;
                if (data.data != undefined) {
                    let user_view = document.getElementById("user_view");
                    let user_tmp = document.getElementById("user_tmp").innerHTML;
                    laytpl(user_tmp).render(data.data, function (html) {
                        user_view.innerHTML = html;
                    });
                    layui.use('element', function () {
                        let element = layui.element;
                        element.init();
                    });
                }
            })
        })
    }

    function news_detail_info(id) {
        $.ajax(address + '/news/getNewsDetail', {
            type: 'POST',
            dataType: 'json',
            data: {id: id},
        }).done(function (data) {
            layui.use('laytpl', function () {
                let laytpl = layui.laytpl;
                if (data.data != undefined) {
                    let news_detail_view = document.getElementById("news_detail_view");
                    let news_detail_tmp = document.getElementById("news_detail_tmp").innerHTML;
                    laytpl(news_detail_tmp).render(data.data, function (html) {
                        news_detail_view.innerHTML = html;
                    });
                    layui.use('element', function () {
                        let element = layui.element;
                        element.init();
                    });
                }
            })
        })
    }

    function hot_news_info() {
        $.ajax(address + '/news/getHotNews', {
            type: 'POST',
            dataType: 'json'
        }).done(function (data) {
            layui.use('laytpl', function () {
                let laytpl = layui.laytpl;
                if (data.data != undefined) {
                    let hot_news_info_view = document.getElementById("hot_news_info_view");
                    let hot_news_info_tmp = document.getElementById("hot_news_info_tmp").innerHTML;
                    laytpl(hot_news_info_tmp).render(data.data, function (html) {
                        hot_news_info_view.innerHTML = html;
                    });
                    layui.use('element', function () {
                        let element = layui.element;
                        element.init();
                    });
                }
            })
        })
    }

    function comment_info(id) {
        $.ajax(address + '/comment/getComment', {
            type: 'POST',
            dataType: 'json',
            data: {newsId: id},
        }).done(function (data) {
            layui.use('laytpl', function () {
                let laytpl = layui.laytpl;
                if (data.data != undefined) {
                    let comment_item_view = document.getElementById("comment_item_view");
                    let comment_item_tmp = document.getElementById("comment_item_tmp").innerHTML;
                    laytpl(comment_item_tmp).render(data.data, function (html) {
                        comment_item_view.innerHTML = html;
                    });
                    layui.use('element', function () {
                        let element = layui.element;
                        element.init();
                    });
                }
            })
        })
    }

    function logout() {
        $.ajax(address + '/login/logout', {
            type: 'POST',
            dataType: 'json'
        }).done(function (data) {
            window.location.reload()
        })
    }

    function chang_detail(id) {
        window.location = './detail.html?#/id=' + id;
        comment_info(id);
        news_detail_info(id);
    }

    function add_comment(id) {
        if ($('#username').val() == undefined) {
            window.location = '../user/login.html';
        } else {
            $('#content').removeClass('layui-hide');
            layer.open({
                type: 1,
                title: '回复',
                content: $('#content'),
                area: ['300px', '250px'],
                scrollbar: false,
                cancel: function (index, layero) {
                    $('#content').addClass('layui-hide');
                },
                btn: ['提交'],
                yes: function (index, layero) {
                    $.ajax(address + '/comment/addComment', {
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            'entitytype': '2',
                            'entityid': id,
                            'content': $('#content').val()
                        }
                    }).done(function (data) {
                        if (data.code == '0') {
                            layer.alert(data.message, {
                                icon: 1,
                                title: "提示"
                            });
                            layer.close(index);
                            comment_info(layui.router().search.id);
                            $('#content').addClass('layui-hide').val('');
                        } else {
                            layer.alert(data.message, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                }
            });
        }
    }

    function addCommentToNews() {

        if ($('#username').val() == undefined) {
            window.location = '../user/login.html';
        } else {
            if ($('#L_L_content').val() == '') {
                layer.alert('内容为空', {
                    icon: 1,
                    title: "提示"
                });
            } else {
                $.ajax(address + '/comment/addComment', {
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'entitytype': '1',
                        'entityid': layui.router().search.id,
                        'content': $('#L_L_content').val()
                    }
                }).done(function (data) {
                    if (data.code == '0') {
                        layer.alert(data.message, {
                            icon: 1,
                            title: "提示"
                        });
                        $('#L_L_content').val('');
                        comment_info(layui.router().search.id);
                    } else {
                        layer.alert(data.message, {
                            icon: 5,
                            title: "提示"
                        });
                    }
                })
            }
        }
    }

    function like(commentId) {
        event.stopPropagation();
        $.ajax(address + '/comment/like', {
            type: 'post',
            dataType: 'json',
            data: {'commentId': commentId}
        }).done(function (data) {
            if (data.code == 0) {
                comment_info(layui.router().search.id);
            }
            if (data.code == 9) {
                layer.alert("请先登录");
            }
        })
    }

    function dislike(commentId) {
        event.stopPropagation();
        $.ajax(address + '/comment/dislike', {
            type: 'post',
            dataType: 'json',
            data: {'commentId': commentId}
        }).done(function (data) {
            if (data.code == 0) {
                comment_info(layui.router().search.id);
            }
            if (data.code == 9) {
                layer.alert("请先登录");
            }
        })
    }


    function change_type(newstype) {
        window.location = './index.html?#/newstype=' + newstype;
        news_info();
    }
</script>
</body>
</html>
